<template>
  <div>
    <div class="header">
      <div class="logoTitleSide">
        
          <img
            src="../img/logo.png"
            class="logoArea"
            alt
            style="width:25px;margin-right:10px;margin-left:8px;"
          >
        
          <div class="titleArea">
            <router-link to="/">
              <span class="pageTitle">80教育商城</span>
            </router-link>
          </div>
      </div>
      <div class="toolMenuSide">
        <div class="userEnterAera">
          <span>|</span>
          <span class="userEnterText" @click="mine">会员中心</span>
        </div>
        <div class="seacherAera">
          <router-link to="/Search">
            <i class="iconfont icon-search"></i>
            <span class="seacherAeraText">搜索</span>
          </router-link>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="clearFix titleCenter">
        <div class="titleText">
          <div class="textContent">产品列表</div>
        </div>
        <div class="formBannerMore">
          <a class="titleMoreLink" href="javascript:;" @click="changView">
            <i class="iconfont icon-more"></i>
          </a>
        </div>
      </div>
      <div class="middleCenter clearfix">
        <div class="mProductTileForm" v-for="(lists,index) in list" :key="index">
          <router-link :to="`/BookDetail/${lists.id}`">
            <div class="imgClass">
              <div class="fk-productListImgWrap">
                <img src="../img/book1.jpg">
              </div>
            </div>
            <div class="paramCollection">
              <p class="paramName">{{lists.name}}</p>
              <p class="productParam">
                <span class="mallPrice">￥{{lists.price}}</span>
              </p>
            </div>
          </router-link>
        </div>
      </div>
      <div class="pagenation">
        <div class="pagebox">
          <div class="pagePrev page" @click="pagePN(0)">
            <span>&lt;</span>
          </div>
          <div class="pagesize">
            <span>{{currentPage}}/{{pagesize}}</span>
          </div>
          <div class="pageNext page" @click="pagePN(1)">
            <span>&gt;</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "allgoods"
);
import session from "../util/session.js";
export default {
  data() {
    return {
      currentPage: 1
    };
  },
  computed: {
    ...mapState(["list", "pagesize"])
  },
  methods: {
    ...mapActions(["getAllgoods"]),
    changView(){
      this.$router.push({name:'searchClassDetail',params:{inp:''}})
    },
    mine() {
      if (session.isLogin()) {
        this.$router.push("/member");
      } else {
        alert("请先登录");
        this.$router.push("/login");
      }
    },
    pagePN(num) {
      if (num) {
        this.currentPage >= this.pagesize
          ? this.currentPage
          : this.currentPage++;
      } else {
        this.currentPage <= 1 ? (this.currentPage = 1) : this.currentPage--;
      }
    }
  },
  mounted() {
    this.getAllgoods(this.currentPage);
  },
  watch: {
    currentPage() {
      this.getAllgoods(this.currentPage);
    }
  }
};
</script>

<style scoped>
.pagebox {
  width: 200px;
  display: flex;
  position: relative;
  margin: 0 auto;
  top: 12px;
}
.page span {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 20px;
  color: #fff;
}
.pagePrev {
  position: absolute;
  left: 0;
}
.pagesize {
  flex-grow: 1;
  line-height: 35px;
}
.pageNext {
  float: right;
  position: absolute;
  right: 0;
}
.page {
  width: 35px;
  height: 35px;
  background: #3285ff;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background-size: 100%;
  position: relative;
}

.pagenation {
  clear: both;
  color: #333;
  height: 59px;
  width: 100%;
  text-align: center;
  position: relative;
  background: #fff;
  margin-bottom: 45px;
}
.clearfix::after {
  clear: both;
  display: block;
  content: "";
}
.mallPrice {
  font-size: 12px;
  color: #3285ff;
}
.middleCenter {
  border-top: 1px solid #f5f5f5;
  background: #fff;
  padding: 10px;
}
.paramName {
  color: #333;
  margin-bottom: 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
  font-size: 12px;
  height: 36px;
}
.fk-productListImgWrap img {
  width: 100%;
  /* height: 82px; */
  border-radius: 5px;
}
.paramCollection {
  margin-top: 5px;
}
.body {
  background: #f5f5f5;
}
.fk-productListImgWrap {
  vertical-align: bottom;
  display: inline-block;
  position: relative;
}
.mProductTileForm {
  width: 29.5%;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}
.imgClass {
  text-align: center;
}

.icon-more {
  font-size: 35px;
  float: right;
  margin-right: 5px;
  color: #858580;
}
.content {
  margin-top: 10px;
}
</style>
